<template>
  <a-tree-select
    v-model="valueData"
    style="width: 100%"
    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
    :tree-data="treeData"
    :loadData="onLoadData"
    @change="(e)=>$emit('change', e)"
    placeholder="选择项目单位">
  </a-tree-select>
</template>

<script>
import { queryDepartTreeSync } from '@/api/api'
export default {
  props: {
    value: {}
  },
  data() {
    return {
      valueData: this.value,
      treeData: [],
    }
  },
  mounted() {
    this.queryDepartTreeSync();
  },
  methods: {
    onLoadData(treeNode) {
      return new Promise(resolve => {
        const { id } = treeNode.dataRef;
        this.queryDepartTreeSync(id, resolve, treeNode.dataRef);
      });
    },
    queryDepartTreeSync(id, resolve, treeChildren = null) {
      queryDepartTreeSync({pid: id}).then((res)=>{
        if(res.code == 0) {
          if(treeChildren) {
            treeChildren.children = treeChildren.children.concat(res.result);
          }else {
            this.treeData = this.treeData.concat(res.result);
          }
          console.log(this.treeData, 'this.treeData');
          if(res.result && res.result.length) {
            this.valueData = res.result[0].id;
            this.$emit('change', this.valueData)
          }
        }
        if(resolve) {
          resolve()
        }
      })
    }
  },
}
</script>

<style>

</style>